<template>
  <a-drawer
    title="数据规则/按钮权限配置"
    width="365"
    :closable="false"
    @close="onClose"
    :visible="visible"
  >

    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="数据规则" key="1">

        <a-checkbox-group v-model="dataruleChecked" v-if="dataruleList.length>0" readonly>
          <a-row>
            <a-col :span="24" v-for="(item,index) in dataruleList" :key=" 'dr'+index ">
              <a-checkbox :value="item.id">{{ item.ruleName }} <div style="color:#9c9c9c;font-size:12px" v-if="item.roleName">角色：<j-ellipsis   :value="item.roleName"  :length="20"/></div></a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
        <div v-else><h3>无配置信息!</h3></div>

      </a-tab-pane>
      <!--<a-tab-pane tab="按钮权限" key="2">敬请期待!!!</a-tab-pane>-->
    </a-tabs>

  </a-drawer>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import {getAction, postAction} from '@/api/manage'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'

export default {
    name: 'RoleDataruleModal',
    components: { ACol, ARow },
    data(){
      return {
        filterMultiDictText,
        dictOptions:{},
        functionId:'',
        roleId:'',
        visible:false,
        tabList: [{
          key: '1',
          tab: '数据规则',
        }, {
          key: '2',
          tab: '按钮权限',
        }],
        activeTabKey: '1',
        url:{
          datarule:"/api/erpmng/sys/role/authDataRule",
        },
        dataruleList:[],
        dataruleChecked:[]
      }
    },
    created () {
      //加载数据字典信息
      this.initDictConfig();
  },
    methods:{
      initDictConfig() {
        initDictOptions('sys_role,role_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'roleName', res.result)
          }
        })
        initDictOptions('sys_depart_role,role_name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'departRoleName', res.result)
          }
        })
      },
      loadData(){
        getAction(`${this.url.datarule}/${this.functionId}/${this.roleId}`).then(res=>{
          console.log(res)
          if(res.success){
            let ruleRole=res.result.datarule
            this.dataruleList = this.handleTreeData(ruleRole)
            let drChecked = res.result.drChecked
            if(drChecked){
              this.dataruleChecked = drChecked.split(",")
            }
          }
        })
      },
      handleTreeData(dataruleList){
        let list=dataruleList;
        list.forEach(item=>{
          if(item.roleIds){
            let roleName=filterMultiDictText(this.dictOptions['roleName'],  item.roleIds + '')
            console.log(roleName);
            console.log(item.roleIds);
            item.roleName=!item.roleIds.includes(roleName)?roleName:filterMultiDictText(this.dictOptions['departRoleName'],  item.roleIds + '')
          }
        })
        return list;
      },
      saveDataruleForRole(){
        if(!this.dataruleChecked || this.dataruleChecked.length==0){
          this.$message.warning("请注意，现未勾选任何数据权限!")
        }
        let params = {
          permissionId:this.functionId,
          roleId:this.roleId,
          dataRuleIds:this.dataruleChecked.join(",")
        }
        console.log("保存数据权限",params)
        postAction(this.url.datarule,params).then(res=>{
          if(res.success){
            this.$message.success(res.message)
          }else{
            this.$message.error(res.message)
          }
        })
      },
      show(functionId,roleId){
        this.onReset()
        this.functionId = functionId
        this.roleId = roleId
        this.visible=true
        this.loadData()
      },
      onClose(){
        this.visible=false
        this.onReset()
      },
      onTabChange (key) {
        this.activeTabKey = key
      },
      onReset(){
        this.functionId=''
        this.roleId=''
        this.dataruleList=[]
        this.dataruleChecked=[]
      }
    }
  }
</script>

<style scoped>

</style>